<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.3.1.min.js"></script>
    <script>
        $(function(){
            // $.ajax({
            //     method:"get",//请求方法
            //     url:"./00 data.json",//请求地址
            //     //data:{"id":10001},///请求参数
            //     //data:"id=10000&name=zhangsan",application/x-www-form-urlencoded //请求服务器格式表单格式
            //     contentType:"json",//请求格式  参数的格式
            //     dataType:"",//返回数据格式  dataType:"text" 返回文本
            //     success:function(data){//请求成功
            //        console.log(data);
            //        if(data.status===200){
            //         var cls=data.data;
            //         $("legend").text(cls.name);//读取班级

            //         var students=cls.student;//读取数组
            //         for (let index = 0; index < students.length; index++) {
            //             const stu = students[index];
            //             $(".data tbody").append("<tr><td>"+stu.id+"</td><td>"+stu.name+"</td></tr>");
            //            }
            //         }else{
            //             console.log(data.msg);
            //        }
            //    },
            //     error:function(res){
            //         console.log(res);
            //     }
            // })
         // url [data]  success [dataType]
            $.get("./00 data.json",function(data){
                if(data.status===200){
                    var cls=data.data;
                    $("legend").text(cls.name);//读取班级

                    var students=cls.student;//读取数组
                    for (let index = 0; index < students.length; index++) {
                        const stu = students[index];
                        $(".data tbody").append("<tr><td>"+stu.id+"</td><td>"+stu.name+"</td></tr>");
                       }
                    }else{
                        console.log(data.msg);
                   }
            })

            //$.post();
        })
    </script>
</head>
<body>
    <legend></legend>
    <table class="data">
        <thead>
            <th>id</th>
            <th>name</th>
        </thead>
        <tbody>
            <!-- <tr></tr> -->
        </tbody>
    </table>
    
</body>
</html>